<template>
  <div>
    <el-card shadow="never" class="filter-wrap" :body-style="{display:'flex'}">
      <div class="con-w d-flex f-align">
        <span class="filter-title mr-10">角色名称</span>
        <el-input
          type="text"
          v-model="listQuery.params.keywords.roleName"
          size="small"
          @keyup.enter.native="search"
        ></el-input>
      </div>
      <div class="con-w d-flex f-align ml-20">
        <span class="filter-title mr-10">角色权限</span>
        <el-input
          type="text"
          v-model="listQuery.params.keywords.permission"
          size="small"
          @keyup.enter.native="search"
        ></el-input>
      </div>
    </el-card>
    <el-button-group class="mt-20">
      <el-button type="primary" size="small" @click="visible=true;handleType='add'">+ 新增角色</el-button>
      <el-button plain icon="el-icon-refresh-right" size="small" @click="refresh">刷新</el-button>
      <!-- <el-button plain icon="el-icon-delete" size="small" @click="batchDel">删除</el-button> -->
    </el-button-group>

    <el-table
      border
      :data="list"
      size="small"
      class="mt-10"
      ref="rolesTable"
      v-loading="loading"
      @selection-change="handleSelectionChange"
    >
      <!-- <el-table-column type="selection" width="55" align="center"></el-table-column> -->
      <el-table-column label="角色名称" width="250" align="center" prop="roleName"></el-table-column>
      <el-table-column label="角色描述" align="center" prop="description"></el-table-column>
      <el-table-column label="操作" align="center" width="200">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="showUpdateDialog(scope.row)">编辑</el-button>
          <el-button size="mini" type="primary" plain @click="singleDel(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="tr mt-30">
      <el-pagination
        hide-on-single-page
        background
        layout="prev, pager, next"
        :total="totalCount"
        :current-page="listQuery.currentPage"
        :page-size="listQuery.pageSize"
        @current-change="handlePageChange"
      ></el-pagination>
    </div>
    <!-- 新增编辑角色 -->
    <EditDialog :visible="visible" :handleType="handleType" :roleRow="roleRow" />
  </div>
</template>

<script>
import EditDialog from "./components/EditDialog";
import { rolesPageList, roleDel } from "api/seting/role";
export default {
  components: {
    EditDialog
  },
  data() {
    return {
      visible: false,
      list: [],
      totalCount: 2,
      loading: false,
      listQuery: {
        pageSize: 10,
        currentPage: 1,
        params: {
          keywords: {
            roleName: "",
            resName: ""
          }
        }
      },
      selectedRow: [],
      roleRow: {},
      handleType: "add",
      resource: []
    };
  },
  created() {
    this.loadData();
  },
  methods: {
    refresh() {
      this.loadData();
    },
    //搜索
    search() {
      this.init();
    },
    init() {
      this.listQuery.currentPage = 1;
      this.loading = false;
      this.loadData();
    },
    //加载列表
    loadData() {
      if (this.loading) return;
      this.loading = true;
      rolesPageList(this.listQuery)
        .then(res => {
          this.loading = false;
          this.list = res.data.list;
          this.totalCount = res.data.totalCount;
        })
        .catch(err => {
          this.loading = false;
          this.$message.error(err.msg);
        });
    },
    // 切换分页
    handlePageChange(page) {
      this.listQuery.currentPage = page;
      this.loadData();
    },
    // table 选中行
    handleSelectionChange(val) {
      this.selectedRow = val;
    },
    // batchDel() {
    //   var rows = this.selectedRow.map(o => o.id);
    //   this.del(rows);
    // },
    singleDel(row) {
      this.del(row.id);
    },
    // 角色删除
    del(id) {
      // if (ids.length == 0) return;
      this.$confirm("此操作将永久删除角色,是否继续?", "提示")
        .then(_ => {
          roleDel({
            roleId: id
          })
            .then(res => {
              this.refresh();
              this.$message.success("删除成功");
              // this.$refs.rolesTable.clearSelection();
            })
            .catch(err => {
              this.$message.error(err.msg);
            });
        })
        .catch(_ => {});
    },
    showUpdateDialog(row) {
      this.visible = true;
      this.handleType = "update";
      this.$nextTick(() => {
        this.roleRow = row;
      });
    }
  }
};
</script>

<style scoped lang="scss">
.filter-wrap {
  .filter-title {
    flex-shrink: 0;
  }
}
.con-w {
  width: 270px;
}
</style>
